---
layout: typedoc
title: '@msrvida/sanddance-specs'
---
<header>
<div class="tsd-page-title">
	<div class="typedoc-container">
	</div>
</div>
</header>
<div class="container container-main">
<div class="row">
	<div class="col-8 col-content">
		<div class="tsd-panel tsd-typography">
			<a href="#msrvidasanddance-specs" id="msrvidasanddance-specs" style="color: inherit; text-decoration: none;">
				<h1>@msrvida/sanddance-specs</h1>
			</a>
			<p><a href="https://vega.github.io/vega/docs/specification/">Vega specifications</a> for unit visualizations.</p>
			<p><img src="https://user-images.githubusercontent.com/11507384/82498036-238d5380-9aa4-11ea-85b0-8fcb31522461.png" alt="image"></p>
			<p><a href="https://microsoft.github.io/SandDance/tests/sanddance-specs/v1/">Demo</a></p>
			<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
				<h2>Usage</h2>
			</a>
			<p>You will need an array of data objects, so that columns types can be inferred.</p>
			<pre><code class="language-js"><span style="color: #000000">    </span><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">inferTypes</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;vega&#039;</span><span style="color: #000000">;</span>

<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">data</span><span style="color: #000000"> = [</span>
<span style="color: #000000">        </span><span style="color: #008000">//your data objects</span>
<span style="color: #000000">    ];</span>

<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">insight</span><span style="color: #000000"> = {</span>
<span style="color: #000000">        </span><span style="color: #A31515">&quot;colorBin&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;quantize&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">        </span><span style="color: #A31515">&quot;columns&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> {</span>
<span style="color: #000000">            </span><span style="color: #A31515">&quot;x&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;Gender&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">            </span><span style="color: #A31515">&quot;color&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;Survived&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">            </span><span style="color: #A31515">&quot;sort&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;Survived&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">            </span><span style="color: #A31515">&quot;facet&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;Age&quot;</span>
<span style="color: #000000">        },</span>
<span style="color: #000000">        </span><span style="color: #A31515">&quot;scheme&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;set1&quot;</span><span style="color: #000000">,   </span><span style="color: #008000">//see https://vega.github.io/vega/docs/schemes/#reference</span>
<span style="color: #000000">        </span><span style="color: #A31515">&quot;facetStyle&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;wrap&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">        </span><span style="color: #A31515">&quot;size&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> {</span>
<span style="color: #000000">            </span><span style="color: #A31515">&quot;height&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #098658">600</span><span style="color: #000000">,</span>
<span style="color: #000000">            </span><span style="color: #A31515">&quot;width&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #098658">800</span>
<span style="color: #000000">        },</span>
<span style="color: #000000">        </span><span style="color: #A31515">&quot;chart&quot;</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;barchartV&quot;</span>
<span style="color: #000000">    };</span>

<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">columns</span><span style="color: #000000"> = </span><span style="color: #795E26">getColumnsFromData</span><span style="color: #000000">(</span><span style="color: #001080">inferTypes</span><span style="color: #000000">, </span><span style="color: #001080">data</span><span style="color: #000000">);</span>
<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">specColumns</span><span style="color: #000000"> = </span><span style="color: #795E26">getSpecColumns</span><span style="color: #000000">(</span><span style="color: #001080">insight</span><span style="color: #000000">, </span><span style="color: #001080">columns</span><span style="color: #000000">);</span>
<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">specViewOptions</span><span style="color: #000000"> = {</span>
<span style="color: #000000">        </span><span style="color: #001080">colors:</span><span style="color: #000000"> {</span>
<span style="color: #000000">            </span><span style="color: #001080">defaultCube:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;steelblue&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">            </span><span style="color: #001080">axisLine:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;#000&quot;</span><span style="color: #000000">,</span>
<span style="color: #000000">            </span><span style="color: #001080">axisText:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;#000&quot;</span>
<span style="color: #000000">        },</span>
<span style="color: #000000">        </span><span style="color: #001080">language:</span><span style="color: #000000"> {</span>
<span style="color: #000000">            </span><span style="color: #001080">count:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;Count&quot;</span>
<span style="color: #000000">        },</span>
<span style="color: #000000">        </span><span style="color: #001080">maxLegends:</span><span style="color: #000000"> </span><span style="color: #098658">20</span><span style="color: #000000">,</span>
<span style="color: #000000">        </span><span style="color: #001080">tickSize:</span><span style="color: #000000"> </span><span style="color: #098658">10</span>
<span style="color: #000000">    };</span>
<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">context</span><span style="color: #000000"> = { </span><span style="color: #001080">specColumns</span><span style="color: #000000">, </span><span style="color: #001080">insight</span><span style="color: #000000">, </span><span style="color: #001080">specViewOptions</span><span style="color: #000000"> };</span>
<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">specResult</span><span style="color: #000000"> = </span><span style="color: #795E26">build</span><span style="color: #000000">(</span><span style="color: #001080">context</span><span style="color: #000000">, </span><span style="color: #001080">data</span><span style="color: #000000">);</span>

<span style="color: #000000">    </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">specResult</span><span style="color: #000000">.</span><span style="color: #001080">errors</span><span style="color: #000000">) {</span>
<span style="color: #000000">        </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">specResult</span><span style="color: #000000">.</span><span style="color: #001080">errors</span><span style="color: #000000">);</span>
<span style="color: #000000">    } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span>
<span style="color: #000000">        </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">specResult</span><span style="color: #000000">.</span><span style="color: #001080">vegaSpec</span><span style="color: #000000">);</span>
<span style="color: #000000">    }</span>
</code></pre>
			<a href="#versions" id="versions" style="color: inherit; text-decoration: none;">
				<h2>Versions</h2>
			</a>
			<a href="#140-changes" id="140-changes" style="color: inherit; text-decoration: none;">
				<h3>1.4.0 Changes</h3>
			</a>
			<ul>
				<li>Show z-axis scale</li>
			</ul>
			<a href="#130-changes" id="130-changes" style="color: inherit; text-decoration: none;">
				<h3>1.3.0 Changes</h3>
			</a>
			<ul>
				<li>Fix for last bin of quantitative band scale</li>
			</ul>
			<a href="#for-more-information" id="for-more-information" style="color: inherit; text-decoration: none;">
				<h2>For more information</h2>
			</a>
			<p>Please visit the <a href="https://microsoft.github.io/SandDance/">SandDance website</a>.</p>
		</div>
	</div>
	<div class="col-4 col-menu menu-highlight">
		<nav class="tsd-navigation primary">
			<ul>
				<li class=" ">
					<a href="modules.html">Exports</a>
				</li>
			</ul>
		</nav>
		<nav class="tsd-navigation secondary">
			<ul class="before-current">
				<li class=" tsd-kind-interface">
					<a href="interfaces/axisscale.html" class="tsd-kind-icon">Axis<wbr>Scale</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/axisscales.html" class="tsd-kind-icon">Axis<wbr>Scales</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/discretecolumn.html" class="tsd-kind-icon">Discrete<wbr>Column</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/facets.html" class="tsd-kind-icon">Facets</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/fieldop.html" class="tsd-kind-icon">Field<wbr>Op</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/globalscales.html" class="tsd-kind-icon">Global<wbr>Scales</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/grouping.html" class="tsd-kind-icon">Grouping</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/innerscope.html" class="tsd-kind-icon">Inner<wbr>Scope</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/insight.html" class="tsd-kind-icon">Insight</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/insightcolumns.html" class="tsd-kind-icon">Insight<wbr>Columns</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/layoutoffsets.html" class="tsd-kind-icon">Layout<wbr>Offsets</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/signalvalues.html" class="tsd-kind-icon">Signal<wbr>Values</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/size.html" class="tsd-kind-icon">Size</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/sizesignals.html" class="tsd-kind-icon">Size<wbr>Signals</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/speccapabilities.html" class="tsd-kind-icon">Spec<wbr>Capabilities</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/speccolorsettings.html" class="tsd-kind-icon">Spec<wbr>Color<wbr>Settings</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/speccolumns.html" class="tsd-kind-icon">Spec<wbr>Columns</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/speccontext.html" class="tsd-kind-icon">Spec<wbr>Context</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/speccreator.html" class="tsd-kind-icon">Spec<wbr>Creator</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/speclanguage.html" class="tsd-kind-icon">Spec<wbr>Language</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/specresult.html" class="tsd-kind-icon">Spec<wbr>Result</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/specrolecapabilities.html" class="tsd-kind-icon">Spec<wbr>Role<wbr>Capabilities</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/specviewoptions.html" class="tsd-kind-icon">Spec<wbr>View<wbr>Options</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/titlesource.html" class="tsd-kind-icon">Title<wbr>Source</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/titles.html" class="tsd-kind-icon">Titles</a>
				</li>
				<li class=" tsd-kind-interface">
					<a href="interfaces/zaxisoptions.html" class="tsd-kind-icon">ZAxis<wbr>Options</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#aggregate" class="tsd-kind-icon">Aggregate</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#axisselectiontype" class="tsd-kind-icon">Axis<wbr>Selection<wbr>Type</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#chart" class="tsd-kind-icon">Chart</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#colorbin" class="tsd-kind-icon">Color<wbr>Bin</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#encodingrule" class="tsd-kind-icon">Encoding<wbr>Rule</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#facetstyle" class="tsd-kind-icon">Facet<wbr>Style</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#insightcolumnroles" class="tsd-kind-icon">Insight<wbr>Column<wbr>Roles</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#orientation" class="tsd-kind-icon">Orientation</a>
				</li>
				<li class=" tsd-kind-type-alias">
					<a href="modules.html#totalstyle" class="tsd-kind-icon">Total<wbr>Style</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#colorscalenone" class="tsd-kind-icon">Color<wbr>Scale<wbr>None</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#fieldnames" class="tsd-kind-icon">Field<wbr>Names</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#other" class="tsd-kind-icon">Other</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#scalenames" class="tsd-kind-icon">Scale<wbr>Names</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#signalnames" class="tsd-kind-icon">Signal<wbr>Names</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#build" class="tsd-kind-icon">build</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#getcolumnsfromdata" class="tsd-kind-icon">get<wbr>Columns<wbr>From<wbr>Data</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#getspeccolumns" class="tsd-kind-icon">get<wbr>Spec<wbr>Columns</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#getstats" class="tsd-kind-icon">get<wbr>Stats</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#inferall" class="tsd-kind-icon">infer<wbr>All</a>
				</li>
			</ul>
		</nav>
	</div>
</div>
</div>
<div class="overlay"></div>